<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>校园跑腿</title>
    <meta name="description" content="校园跑腿"/>
    <meta name="keywords" content="校园跑腿"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/timedropper.min.css"/>
    <link rel="stylesheet" href="/css/datedropper.css"/>


    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/js/timedropper.min.js"></script>
    <script type="text/javascript" src="/js/datedropper.min.js"></script>
    <script type="text/javascript" src="/js/TimeObjectUtil.js"></script>
    <!-- 引入 layui.css -->
    <link href="/layui/css/layui.css" rel="stylesheet">

    <!-- 引入 layui.js -->
    <script src="/layui/layui.js"></script>
</head>
<body>
    <header data-am-widget="header" class="am-header am-header-default header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.go(-1)" class="">
                <i class="am-header-icon am-icon-angle-left"></i>
            </a>
        </div>
        <h1 class="am-header-title"><a href="#title-link" class="" style="color: #333;">发布中心</a></h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class=""> </a>
        </div>
    </header>
    <div class="demo" style="background: white;margin-top: 2px">
        <input type="hidden" th:value="${type_demand}" id="hidden_type_demand"/>
        <span class="add_input1" style="color: gray">找人干什么： </span>
        <select name="colId" id="install_school" class="select" style="background: white">
            <option value="求帮忙">求帮忙</option>
            <option value="求带饭">求带饭</option>
            <option value="求陪跑">求陪跑</option>
            <option value="取快递">取快递</option>
        </select>
        <script>
            var hiddenTypeDemand = document.getElementById("hidden_type_demand").value;
            var selectElement = document.getElementById("install_school");
            selectElement.value = hiddenTypeDemand;
        </script>
    </div>
    <textarea id="content" class="add_input" type="text" style="padding-left: 8px" placeholder="请描述一下您这次的目的..." cols="10" rows="5"></textarea>
<!--    <textarea id="address" class="add_input" type="text" style="padding-left: 8px" placeholder="请选择您要送达的地址...  " cols="10" rows="5"></textarea>-->
    <select style="width: 100%;height: 15%;" name="address">
        <option th:value="${userAddress.getAddress()}" th:text="${userAddress.getAddress()}">请选择地址</option>
        <th:block th:each="address : ${addressList}">
            <option th:value="${address.getName()}" th:text="${address.getAddress()}"></option>
        </th:block>
    </select><br>
    <textarea id="remark" class="add_input" type="text" style="padding-left: 8px" placeholder="请填写备注...  " cols="10" rows="5"></textarea>

    <div style="background: white;margin-top: 33px;padding-bottom: 4px">
        <span class="add_input1" style="color: gray">感谢回馈： </span>
        <input style="width: 50px" type="number" id="amountInput" min="0" step="1" value="2" /> 元
    </div>
    <br/>
    <div class="layui-input-inline" style="display: inline;background: white;margin-top: 33px;padding-bottom: 4px">
        <label style="margin-left: 10px" for="ID-laydate-type-datetime-1">截止时间</label><input type="text" class="layui-input" id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
    </div>
    <script>
        layui.use(function(){
            var laydate = layui.laydate;
            // 日期时间选择器 - 日期和时间选择器同时显示（全面板）
            laydate.render({
                elem: '#ID-laydate-type-datetime-1',
                type: 'datetime',
                fullPanel: true // 2.8+
            });
        });
    </script>

    <div style="width: 100%;text-align: center;margin-top: 50px">
        <button class="className" onclick="submitForm()">
            立即发布
        </button>
    </div>
    <script>
        function submitForm() {
            var selectElement = document.getElementsByName("address")[0]; // 获取 <select> 元素
            var selectedText = selectElement.options[selectElement.selectedIndex].text; // 获取选中项的文本
            var currentDate = new Date(); // 创建一个Date对象，表示当前时间
            var year = currentDate.getFullYear(); // 获取年份
            var month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 获取月份（注意要加1，且补0）
            var day = String(currentDate.getDate()).padStart(2, '0'); // 获取日期（补0）
            var hours = String(currentDate.getHours()).padStart(2, '0'); // 获取小时（补0）
            var minutes = String(currentDate.getMinutes()).padStart(2, '0'); // 获取分钟（补0）
            var seconds = String(currentDate.getSeconds()).padStart(2, '0'); // 获取秒（补0）
            var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
            window.alert(formattedDate)
            var data = {
                'type': document.getElementById('install_school').value,
                'title': document.getElementById('install_school').value,
                'demand': document.getElementById('content').value,
                'remark': document.getElementById('remark').value,
                'deliveryLocation': selectedText,
                'deadLine':document.getElementById('ID-laydate-type-datetime-1').value.toString(),
                'billTime':formattedDate,
                'price': document.getElementById('amountInput').value
            };
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/order/submit_order', false);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 请求成功处理逻辑
                    console.log('提交成功');
                    window.alert("提交成功");
                    window.location.href="/user/homepage";
                } else {
                    // 请求失败处理逻辑
                    console.log('提交失败');
                }
            };
            xhr.send(JSON.stringify(data));
        }
    </script>
    <script>
        var inputElement = document.getElementById("amountInput");

        inputElement.addEventListener("input", function(event) {
            var inputValue = event.target.value;

            // 使用正则表达式检查输入是否为整数
            var regex = /^\d+$/;

            if (!regex.test(inputValue) || inputValue==='.') {
                // 如果输入不是整数，清空输入框的值
                event.target.value = "";
            }
        });
        var inputElement = document.getElementById("amountInput");

        inputElement.addEventListener("keydown", function(event) {
            if (event.key === "." || event.key === "Decimal") {
                event.preventDefault();
            }
        });
    </script>
</body>
</html>
